app/about/[name]/page.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { Fragment } from "react";
import Markdown from "markdown-to-jsx";
import { notFound } from "next/navigation";

import InfoBar from "~/components/InfoBar";

import styles from "~/styles/index.module.css"
import system from "~/config/system.json"

export async function generateStaticParams() {
  const memberSlugs = system.members.map(member => member.name.toLowerCase())
  return memberSlugs.map((name: string) => ({ name }))
}

export default function MemberPage({ params: { name } }) {
  const member = system.members.find(member => member.name.toLowerCase() === name)

  if (!member) notFound()

  return (
    <>
      <main className="mainColumn">
        <InfoBar memberName={member.name} />
        <Markdown outer="short">{member.bioShort}</Markdown>
        <Markdown outer="long">{member.bioContinued}</Markdown>
        {member.bioFields?.length && (
          <div className={styles.glance}>
            {member.bioFields.map(({ name, value }) => (
              <Fragment key={name}>
                <span className={styles.label}>{name}</span>
                <span>{value}</span>
              </Fragment>
            ))}
          </div>
        )}
      </main>
    </>
  )
}